<@override name="title">
添加课程章节
</@override>

<@override name="content">
<div class="content">
    <div class="container-fluid">
        <div class="block">
            <div class="block-body">
                <table class="table list">
                    <tr>
                        <td style="width:520px;">
                            <#if (course.picture)?? && course.picture != ''>
                            <div style="width:150px;height:72px;float:left;
                                         background-image:url('/file/attachment/${course.picture}/m');background-size:contain;">
                            </div>
                            <#else>
                            <div src="${base}/res/i/course.png" style="width:150px;height:90px;float:left;"></div>
                        </#if>
                        <div class="ml-15 w-300" style="float:left;">
                            <p class="ellipsis"  title="${course.name!}"><strong>${course.name!}</strong></p>
                            <p class="ellipsis-multi h-40" title="${course.brief!}">${course.brief!}</p>
                        </div>
                        </td>
                        <td>
                            <p>时长：${course.time!}分钟</p>
                            <p style="color: red;">
                                价格：<#if course.free == 1>免费<#else>￥${course.price!}</#if>
                            </p>
                            <p>
                                难度：<#if course.level == 1>初级<#elseif course.level == 2>中级<#else>高级</#if>
                            </p>
                        </td>
                        <td>
                            <p>推荐权重：${course.weight!}</p>
                            <p>${course.classifyName!} / ${course.subClassifyName!}</p>
                            <#if course.type == 0>
                            <p>${course.studyCount!}人在学</p>
                            <#else>
                            <p>${course.livetime!} 直播</p>
                        </#if>
                        </td>
                        <td style="width:120px;">
                            <p><a href="${base}/courseInfo?id=${course.id!}">返回</a></p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <!--章节添加 start-->
        <div class="row-fluid">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab">目录</a>
                </li>
                <li><button onclick="addCourseSection()" class="btn btn-default">+添加章节</button></li>
                <li><button onclick="saveCourseSections()" class="btn btn-primary">保存章节</button></li>
            </ul>
        </div>

        <div id="courseTabContent" class="tab-content" style="padding:10px;">

        </div>
        <!--章节添加 end-->

    </div>
</div>

<!-- 专门为复制div使用 start-->
<div id="courseSection4Clone">
    <div sid="chapter-clone" class="chapter-section-clone" style="display:none;">
        <div class="form-group clearfix">
            <label class="control-label">章名称</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="chaptName" placeholder="请输入名称">
            </div>
            <div class="col-md-1">
                <button onclick="deleteChapt(this)" class="btn btn-default">- 删除章</button>
            </div>
            <div class="col-md-1">
                <button onclick="addSection(this)" class="btn btn-default">+ 添加节</button>
            </div>
        </div>

        <div id="section4Clone">
            <div sid="section-clone" class="form-group clearfix">
                <label class="control-label" style="margin-left:60px;">节信息</label>
                <div class="col-md-7">
                    <input type="text" class="form-control" name="sectionName" placeholder="请输入节名称">
                    <input type="text" class="form-control" name="videoUrl" style="margin: 5px 0px;" placeholder="请输入视频链接">
                    <input type="number" class="form-control" name="time" placeholder="请输入时长（分钟）">
                </div>
                <div class="col-md-1">
                    <button onclick="deleteSection(this)" class="btn btn-default">- 删除节</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 专门为复制div使用 end -->

<script type="text/javascript">
    //添加章节按钮点击事件
    function addCourseSection() {
        let divHtml = $('#courseSection4Clone').clone().html();
        divHtml = divHtml.replaceAll("display:none;","display:block;")
        $('#courseTabContent').append(divHtml);
    }

    //添加节 按钮点击事件
    function addSection(el) {
        let divHtml = $('#section4Clone').clone().html();
        $(el).parent().parent().parent().append(divHtml);
    }

    //删除章节 按钮点击事件
    function deleteChapt(el) {
        $(el).parent().parent().parent().remove();
    }

    //删除节 按钮点击事件
    function deleteSection(el) {
        $(el).parent().parent().remove();
    }

    //获取前端的章节中的数据
    function getCourseSectionData(){
        let chaptSections = [];
        let chaptDivs = $('#courseTabContent').find("div[sid='chapter-clone']");
        //章
        $.each(chaptDivs,function (i, item) {
            let chaptName = $(item).find("input[name='chaptName']").val();
            if(!_os.isEmpty(chaptName)){
                let chaptObj = {};
                chaptObj.chaptName = chaptName;
                chaptObj.sections = [];

                //小节
                let sectionDivs = $(item).find("div[sid='section-clone']");
                $.each(sectionDivs, function (j, sItem) {
                    let sectionName = $(sItem).find("input[name='sectionName']").val();
                    let videoUrl = $(sItem).find("input[name='videoUrl']").val();
                    let time = $(sItem).find("input[name='time']").val();
                    if(_os.isEmpty(time)){
                        time = 0;
                    }
                    if(!_os.isEmpty(sectionName)){
                        let sectionObj = {};
                        sectionObj.name = sectionName;
                        sectionObj.videoUrl = videoUrl;
                        sectionObj.time = time;

                        chaptObj.sections.push(sectionObj);
                    }
                })

                chaptSections.push(chaptObj);
            }
        })
        return chaptSections;
    }

    //保存课程信息到数据库
    function saveCourseSections() {
        let chaptSectionData = getCourseSectionData();
        let chaptSections = JSON.stringify(chaptSectionData);
        let courseId = '${course.id}';
        $.ajax({
            url:'${base}/saveSections',
            method:'POST',
            dataType:'json',
            data:{'chaptSections':chaptSections,'courseId':courseId},
            success: function(resp){
                if(resp.errcode == 0){
                    window.location.href="${base}/courseInfo?id="+courseId;
                }else{
                    Modal.alert("保存失败");
                }
            },
            error: function(resp){
                Modal.alert("保存失败");
            }
        })
    }
</script>

</@override>

<@extends name="_manage_base.html" />
